<template>
	<b-layout-index>
		<navbar bgcolor="#fff" :title="$t('密码修改')"></navbar>
		<!-- <u--form labelWidth="200" labelStyle="font-size:12px" :model="form" :rules="rules" ref="form1">
			<view class="bg-white  pd-10 font-size-12">

				<u-form-item :label="$t('密码')" prop="form.password" borderBottom ref="password">
					<u--input v-model="form.password" fontSize="12" type="password" :placeholder="$t('请输入密码')"
						border="none"></u--input>
				</u-form-item>
				<u-form-item :label="$t('新密码')" fontSize="12" prop="form.newpassword" borderBottom ref="newpassword">
					<u--input v-model="form.newpassword" fontSize="12" type="password" :placeholder="$t('请输入密码')"
						border="none"></u--input>
				</u-form-item>
				<u-form-item :label="$t('新密码')" prop="form.repassword" borderBottom ref="repassword">
					<u--input v-model="form.repassword" fontSize="12" type="password" :placeholder="$t('请输入密码')"
						border="none"></u--input>
				</u-form-item>
			</view>

		</u--form>

		<view class="mg-top-10 pd-20">

			<u-button shape="circle" type="primary" @click="submit">{{$t('提交')}}</u-button>
		</view> -->

		<!-- 主要内容区 -->
		<view class="content">
			<!-- 表单区域 -->
			<view class="form-area">
				<!-- 原密码 -->
				<view class="input-group">
					<text class="input-label">{{$t("原密码")}}</text>
					<view class="input-wrapper">
						<input class="password-input" :type="showOldPassword ? 'text' : 'password'"
							v-model="oldPassword" :placeholder="$t('请输入原密码')" />
						<uni-icons class="eye-icon" :type="showOldPassword ? 'eye-slash' : 'eye'" size="20"
							color="#999999" @click="showOldPassword = !showOldPassword" />
					</view>
				</view>

				<!-- 新密码 -->
				<view class="input-group">
					<text class="input-label">{{$t('新密码')}}</text>
					<view class="input-wrapper">
						<input class="password-input" :type="showNewPassword ? 'text' : 'password'"
							v-model="newPassword" :placeholder="$t('请输入新密码')" />
						<uni-icons class="eye-icon" :type="showNewPassword ? 'eye-slash' : 'eye'" size="20"
							color="#999999" @click="showNewPassword = !showNewPassword" />
					</view>
				</view>

				<!-- 确认新密码 -->
				<view class="input-group">
					<text class="input-label">{{$t('确认新密码')}}</text>
					<view class="input-wrapper">
						<input class="password-input" :type="showConfirmPassword ? 'text' : 'password'"
							v-model="confirmPassword" :placeholder="$t('请再次输入新密码')" />
						<uni-icons class="eye-icon" :type="showConfirmPassword ? 'eye-slash' : 'eye'" size="20"
							color="#999999" @click="showConfirmPassword = !showConfirmPassword" />
					</view>
				</view>

				<!-- 密码规则提示 -->
				<view class="rule-card">
					<text class="rule-title">{{$t('密码规则')}}：</text>
					<view class="rule-list">
						<view class="rule-item">
							<uni-icons type="circle" size="12" color="#999999" />
							<text class="rule-text">{{$t('密码长度为{0}-{1}个字符',[6,20])}}</text>
						</view>
						<view class="rule-item">
							<uni-icons type="circle" size="12" color="#999999" />
							<text class="rule-text">{{$t('必须包含大小写字母和数字')}}</text>
						</view>
						<!--   <view class="rule-item">
              <uni-icons type="circle" size="12" color="#999999" />
              <text class="rule-text">可以使用特殊字符 !@#$%^&*</text>
            </view> -->
					</view>
				</view>

				<!-- 密码强度指示器 -->
				<view v-if="newPassword" class="strength-indicator">
					<view class="strength-header">
						<text class="strength-label">{{$t('密码强度')}}</text>
						<text :class="['strength-value', strengthColorClass]">{{ strengthText }}</text>
					</view>
					<view class="strength-bar-bg">
						<view class="strength-bar" :class="strengthColorClass"
							:style="{ width: `${strengthPercentage}%` }"></view>
					</view>
				</view>
			</view>

			<!-- 提交按钮 -->
			<button class="submit-btn" :disabled="!isFormValid || isLoading"
				:class="{ 'submit-btn-disabled': !isFormValid || isLoading }" @click="handleSubmit">
				<text v-if="!isLoading">{{$t('确认修改')}}</text>
				<uni-icons v-else type="spinner-cycle" size="20" color="#FFFFFF" />
			</button>
		</view>

	</b-layout-index>
</template>

<script>
	import {
		myPasswordEdit
	} from '../../../../api/user';
	/* 
		export default {
			data() {
				return {


					form: {
						password: '',
						newpassword: '',
						repassword: ""
					},



					/* 
									rules: {
										'form.password': {
											type: 'string',
											required: true,
											message: this.$t('请输入密码'),
											trigger: ['blur', 'change']
										},
										'form.newpassword': [{
											type: 'string',
											required: true,
											message: this.$t('请输入密码'),
											trigger: ['blur', 'change'],
										}, {
											min: 6,
											max: 8,
											message: this.$t('长度在{0}-{1}个字符之间', [6, 8])
										}, ],
										'form.repassword': [{
											type: 'string',
											required: true,
											message: this.$t('请输入密码'),
											trigger: ['blur', 'change'],
										}, {
											min: 6,
											max: 8,
											message: this.$t('长度在{0}-{1}个字符之间', [6, 8])
										}, {
											validator: (rule, value, callback) => {
												console.log(rule)
												return uni.$u.test.contains(value, "A");
											},
											message: '必须包含字母"A"'
										}]

									} 

					radio: '',
					switchVal: false
				};
			},
			onReady() {
				//onReady 为uni-app支持的生命周期之一
				this.$refs.form.setRules(this.rules)
			},
			methods: {
				confirm(e) {
					var value = e.value[0]
					this.form.bank = value;
					console.log('confirm', e)
					this.bankCardFlag = false
				},
				submit() {
					/* this.$refs.form1.validate().then(res => {
						uni.$u.toast('校验通过')
					}).catch(errors => {
						console.log(errors)
						uni.$u.toast('校验失败')
					}) 
					var form = this.form;
					if (form.password.length > 0) {
						if (form.password.length > 5) {

							if (form.newpassword == form.repassword) {
								myPasswordEdit(form).then((res) => {
									uni.$u.toast(this.$t('修改成功'))
								}).catch((e) => {
									uni.$u.toast(this.$t('修改失败'))
								})

							} else {
								uni.$u.toast(this.$t('新密码和确认密码不一样'))
							}
						} else {
							uni.$u.toast(this.$t('账号密码不能少于六位数'))
						}
					} else {
						uni.$u.toast(this.$t('请输入密码'))
					}
				}
			}
		} */
	export default {
		data() {
			return {
				oldPassword: '',
				newPassword: '',
				confirmPassword: '',
				showOldPassword: false,
				showNewPassword: false,
				showConfirmPassword: false,
				isLoading: false
			};
		},
		computed: {
			strengthPercentage() {
				if (!this.newPassword) return 0;
				let strength = 0;

				if (this.newPassword.length >= 6) strength += 30;
				if (/[0-9]/.test(this.newPassword)) strength += 30;
				if (/[A-Z]/.test(this.newPassword)) strength += 20;
				if (/[a-z]/.test(this.newPassword)) strength += 20;


				return strength;
			},
			strengthColorClass() {
				const strength = this.strengthPercentage;
				if (strength < 50) return 'strength-weak';
				if (strength < 75) return 'strength-medium';
				return 'strength-strong';
			},
			strengthText() {
				const strength = this.strengthPercentage;
				if (strength < 50) return this.$t('弱');
				if (strength < 75) return this.$t('中');
				return this.$t('强');
			},
			isFormValid() {
				return this.oldPassword &&
					this.newPassword &&
					this.confirmPassword &&
					this.newPassword === this.confirmPassword &&
					this.strengthPercentage >= 60;
			}
		},
		methods: {
			toggleShowPassword(type) {
				if (type === 'old') this.showOldPassword = !this.showOldPassword;
				if (type === 'new') this.showNewPassword = !this.showNewPassword;
				if (type === 'confirm') this.showConfirmPassword = !this.showConfirmPassword;
			},
			async handleSubmit() {
				if (!this.isFormValid) return;

				this.isLoading = true;
				try {


					var form = {
						password: this.oldPassword,
						newpassword: this.newPassword,
						repassword: this.confirmPassword,
					}
					myPasswordEdit(form).then((res) => {
						uni.showToast({
							title: this.$t('密码修改成功'),
							icon: 'success'
						});
						this.goBack();
					}).catch((e) => {
						uni.showToast({
							title: this.$t('修改失败，请重试'),
							icon: 'none'
						});
					})

				} catch (error) {
					uni.showToast({
						title: this.$t('修改失败，请重试'),
						icon: 'none'
					});
				} finally {
					this.isLoading = false;
				}
			},
			goBack() {
				uni.navigateBack();
			}
		}
	};
</script>

<style>
	page {
		height: 100%;
		background-color: #F5F5F5;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.nav-bar {
		width: 750rpx;
		height: 88rpx;
		background-color: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.nav-content {
		display: flex;
		align-items: center;
		height: 100%;
		padding: 0 30rpx;
	}

	.back-icon {
		width: 40rpx;
		height: 40rpx;
	}



	.content {

		padding: 30rpx;
		flex: 1;
	}

	.form-area {
		display: flex;
		flex-direction: column;
		gap: 40rpx;
	}

	.input-group {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.input-label {
		font-size: 12px;
		color: #666666;
	}

	.input-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 30rpx;
		height: 96rpx;
	}

	.password-input {
		flex: 1;
		height: 96rpx;
		font-size: 12px;
	}

	.eye-icon {
		width: 40rpx;
		height: 40rpx;
		padding-left: 20rpx;
	}

	.rule-card {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx;
	}

	.rule-title {
		font-size: 12px;
		color: #666666;
		font-weight: 500;
		margin-bottom: 20rpx;
	}

	.rule-list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.rule-item {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.rule-text {
		font-size: 12px;
		color: #999999;
	}

	.strength-indicator {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.strength-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.strength-label {
		font-size: 12px;
		color: #999999;
	}

	.strength-value {
		font-size: 12px;
	}

	.strength-bar-bg {
		height: 8rpx;
		background-color: #EEEEEE;
		border-radius: 4rpx;
		overflow: hidden;
	}

	.strength-bar {
		height: 100%;
		transition: all 0.3s;
	}

	.strength-weak {
		background-color: #FF4D4F;
		color: #FF4D4F;
	}

	.strength-medium {
		background-color: #FAAD14;
		color: #FAAD14;
	}

	.strength-strong {
		background-color: #52C41A;
		color: #52C41A;
	}

	.submit-btn {
		width: 90%;
		height: 88rpx;
		margin: 60rpx auto;
		background-color: #2979FF;
		color: #FFFFFF;
		font-size: 16px;
		font-weight: 500;
		border-radius: 44rpx;
		display: flex;
		align-items: center;  
		justify-content: center;
	}

	.submit-btn-disabled {
		background-color: #CCCCCC;
		opacity: 0.7;
	}
</style>